<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Template • TodoMVC</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<section class="todoapp">
		<!-- 头部 -->
		<header class="header">
			<h1>todos</h1>
			<input v-focus class="new-todo" placeholder="你想做什么" autofocus @keyup.enter="add" v-model.trim="name">
		</header>
		<!-- 主体部分 -->
		<section class="main">
			<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAllDone">
			<label for="toggle-all">Mark all as complete</label>
			<ul class="todo-list">
				<!-- These are here just to show the structure of the list items -->
				<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
				<li :class="{completed:item.flag,editing:item.id == editingId}" v-for="item in showList" :key="item.id">
					<div class="view">
						<input class="toggle" type="checkbox" v-model="item.flag">
						<label @dblclick="showEdit(item.id)">{{item.name}}</label>
						<button class="destroy" @click="del(item.id)"></button>
					</div>
					<input v-focus1 class="edit" v-model="item.name" @blur="saveEdit" @keyup.enter="saveEdit">
				</li>
			</ul>
		</section>
		<!-- 底部 -->
		<footer class="footer">
			<!-- This should be `0 items left` by default -->
			<span class="todo-count"><strong>{{num}}</strong>项任务剩余</span>
			<!-- Remove this if you don't implement routing -->
			<ul class="filters">
				<li>
					<a :class="{selected:current=='all'}" href="#/" @click="changeType('all')">所有</a>
				</li>
				<li>
					<a :class="{selected:current=='active'}" href="#/active" @click="changeType('active')">未完成</a>
				</li>
				<li>
					<a :class="{selected:current=='completed'}" href="#/completed"
						@click="changeType('completed')">已完成</a>
				</li>
			</ul>
			<!-- Hidden if no completed items are left ↓ -->
			<button class="clear-completed" v-show="isShowClearAll">清除已完成</button>
		</footer>
	</section>
	<script src="js/vue.js"></script>
	<script>
		Vue.directive('focus', {
			inserted: function (el) {
				el.focus()
			}
		})
		Vue.directive('focus1', {
			update: function (el) {
				el.focus()
			}
		})
		var vm = new Vue({
			created() {
				this.list = JSON.parse(localStorage.getItem('todos') || '[]')
			},
			el: '.todoapp',
			data: {
				list: [],
				name: '',
				editingId: -1,
				current: 'all'
			},
			methods: {
				del: function (id) {
					var index = this.list.findIndex(item => item.id == id)
					this.list.splice(index, 1)
				},
				add: function () {
					if (this.name == '') return;
					var obj = {
						id: this.list.length>0?this.list.slice(-1)[0].id + 1:1,
						name: this.name,
						flag: false
					}
					this.list.push(obj)
					this.name = ''
				},
				showEdit: function (id) {
					this.editingId = id
				},
				saveEdit: function () {
					this.editingId = -1
				},
				changeType: function (type) {
					this.current = type
					console.log(this.current)
				}
			},
			computed: {
				num: function () {
					return this.list.filter(item => item.flag == false).length
				},
				isShowClearAll: function () {
					return this.list.some(item => item.flag == true)
				},
				isAllDone: {
					get: function () {
						return this.list.every(item => item.flag == true)
					},
					set: function (value) {
						this.list = this.list.map(item => {
							item.flag = value
							return item
						})
					}
				},
				showList: function () {
					if (this.current == 'all') {
						return this.list
					} else if (this.current == 'active') {
						return this.list.filter(item => item.flag == false)
					} else if (this.current == 'completed') {
						return this.list.filter(item => item.flag == true)
					}
				}
			},
			watch: {
				list: {
					handler: function () {
						localStorage.setItem('todos',JSON.stringify(this.list))
					},
					deep:true 
				}
			}
		})
	</script>
</body>

</html>